import { BasicComponent } from './basic/basic.component';
import { VerifyComponent } from './verify/verify.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';

export const OverflowConfig = {
  location: 'Overflow',
  description: '超长情况下文本处理出...并tip提示',
  description_en: '',
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/overflow/basic/basic.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic Use',
      demoDescription: '最简单的基础用法。',
      demoDescription_en: 'The simplest basic usage.',
    },
    {
      demo: VerifyComponent,
      codePath: 'showcase/overflow/verify/verify.component',
      demoTitle: '问题场景',
      demoTitle_en: 'Problem Scenarios',
      demoDescription: '判断是否出现省略号方案变更过程中发现的问题，若有修改，必验。',
      demoDescription_en: 'Check whether the problems found during the change of the ellipsis solution occur. If the problems are rectified, the test must be performed.',
      devDebug: true
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/overflow/demo2/demo2.component',
      demoTitle: '开头省略',
      demoTitle_en: 'Ellipsis at the beginning',
      demoDescription: '开头省略',
      demoDescription_en: 'Ellipsis at the beginning',
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/overflow/demo3/demo3.component',
      demoTitle: '添加后缀的省略',
      demoTitle_en: 'Suffixed ellipsis',
      demoDescription: '省略号出现在中间，可添加后缀字符或字符数，如果都不配置，则省略号前后字符数相同。',
      demoDescription_en: 'The ellipsis appears in the middle. You can add suffix characters or the number of characters. If neither of them is configured, the number of characters before and after the ellipsis is the same.',
    },
  ],
  useRule: [],
  useRule_en: [],
  useSuggestion: [
    '请确保挂载 lvOverflow 的元素能接受 onMouseEnter、onMouseLeave、onFocus、onClick 事件。',
    '挂载 lvOverflow 的元素不能限制高度，不能有阻止换行样式。',
  ],
  useSuggestion_en: ['Make sure that elements carried with lvOverflow can accept onMouseEnter, onMouseLeave, onFocus, onClick events.'],
  selector: 'lv-overflow、lvOverflow',
  snippet: `
        <span lv-overflow="\${1:This tooltip is dark theme}">\${2:This tooltip is dark theme}</span>
        <span lvOverflow="\${1:This tooltip is dark theme}">\${2:This tooltip is dark theme}</span>
      `,
  mApi: [
    {
      name: 'Overflow',
      name_en: 'Overflow',
      selector: 'lv-overflow、lvOverflow',
      api: [
        {
          attribute: 'lvTooltipTheme',
          type: 'string',
          default: 'light',
          description: `提示框主题，可选值为 ('dark' | 'light')。`,
          description_en: `Theme of the tipbox. Value: ('dark' | 'light').`,
        },
        {
          attribute: 'lvTooltipPosition',
          type: 'string',
          default: 'top',
          description: `提示框位置，可选值为 ('top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom')。`,
          description_en: `Position of tipbox. Value: ('top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom').`,
        },
        {
          attribute: 'lvTooltipClassName',
          type: 'string',
          default: '-',
          description: `tooltip类名。`,
          description_en: `Tooltip class name.`,
        },
        {
          attribute: 'lvContentTpl',
          type: 'TemplateRef<any> | string',
          default: '',
          description: `自定义提示内容，优先级大于默认内容`,
          description_en: `Customized prompt content. The priority is higher than the default content.`,
        },
        {
          attribute: 'lvKeepWhiteSpace',
          type: 'boolean',
          default: '--',
          description: '是否保留多个空格,如果在表格里面使用时优先使用表格的lvKeepWhiteSpace配置。',
          description_en:
            'Indicates whether to reserve multiple spaces. If the spaces are used in a table, the lvKeepWhiteSpace configuration in the table is used preferentially.',
          global: true,
        },
        {
          attribute: 'lvEllipsisDirection',
          type: 'string',
          default: 'end',
          description: `省略号位置，可选值为 ('end' | 'start' | 'mid' )。`,
          description_en: `Position of ellipsis. Value: ('end' | 'start' | 'mid').`,
        },
        {
          attribute: 'lvSuffixCount',
          type: 'number',
          default: '',
          description: `中间省略时的后缀字符个数`,
          description_en: `Number of suffix characters when the middle is omitted.`,
        },
        {
          attribute: 'lvSuffix',
          type: 'string',
          default: '',
          description: `中间省略时的后缀字符`,
          description_en: `Suffix character in middle ellipsis.`,
        },
        {
          attribute: 'lvRows',
          type: 'number',
          default: '',
          description: `省略的行数`,
          description_en: `Number of lines omitted`,
        },
      ],
      event: [],
    },
  ],
};
